import React, { FC, ReactNode } from "react";
import styles from "./index.module.less";

const imgUrl =
  "https://tse1-mm.cn.bing.net/th/id/OIP-C.AJPk5Uf5Y5JVB72xvHTCbAAAAA?w=172&h=180&c=7&r=0&o=5&pid=1.7";

interface ModalProps {
  children: ReactNode;
  visible: boolean;
  onCancel: () => void;
}

const Modal: FC<ModalProps> = (props) => {
  const { children, visible, onCancel } = props;
  return (
    <>
      {visible && (
        <div className={styles.container}>
          <div className={styles.bg} />
          <div className={styles.content}>
            <img src={imgUrl} onClick={onCancel} className={styles.close} />
            {children}
          </div>
        </div>
      )}
    </>
  );
};

export default Modal;
